<template>
  <div id="app">
    <!-- <div class="row">
      <wd-button>默认按钮</wd-button>
      <wd-button type='primary' @click="fn" disabled>主要按钮</wd-button>
      <wd-button type='success'>成功按钮</wd-button>
      <wd-button type='info'>信息按钮</wd-button>
      <wd-button type='warning'>警告按钮</wd-button>
      <wd-button type='danger'>危险按钮</wd-button>
    </div>

    <div class="row">
      <wd-button>默认按钮</wd-button>
      <wd-button type='primary' plain>主要按钮</wd-button>
      <wd-button type='success' plain>成功按钮</wd-button>
      <wd-button type='info' plain>信息按钮</wd-button>
      <wd-button type='warning' plain>警告按钮</wd-button>
      <wd-button type='danger' plain>危险按钮</wd-button>
    </div>

    <div class="row">
      <wd-button round>默认按钮</wd-button>
      <wd-button type='primary' plain round iconfont>&#xe6eb;  主要按钮</wd-button>
      <wd-button type='success' plain round>成功按钮</wd-button>
      <wd-button type='info' plain round>信息按钮</wd-button>
      <wd-button type='warning' plain round>警告按钮</wd-button>
      <wd-button type='danger' plain round>危险按钮</wd-button>
    </div>

    <div class="row">
      <wd-button circle><i class="iconfont">&#xe6ef;</i></wd-button>
      <wd-button type='primary' plain circle><i class="iconfont">&#xe6eb;</i></wd-button>
      <wd-button type='success' plain circle><i class="iconfont">&#xe6f0;</i></wd-button>
      <wd-button type='info' plain circle><i class="iconfont">&#xe6f2;</i></wd-button>
      <wd-button type='warning' plain circle><i class="iconfont">&#xe6f3;</i></wd-button>
      <wd-button type='danger' plain circle><i class="iconfont">&#xe6fb;</i></wd-button>
    </div>

    <div class="row">
      <wd-button circle>&#xe6ef;</wd-button>
      <wd-button type='primary' plain circle iconfont @click="a">&#xe6eb;</wd-button>
      <wd-button type='success' plain circle iconfont>&#xe6f0;</wd-button>
      <wd-button type='info' plain circle iconfont>&#xe6f2;</wd-button>
      <wd-button type='warning' plain circle iconfont>&#xe6f3;</wd-button>
      <wd-button type='danger' plain circle iconfont>&#xe6fb;</wd-button>
    </div> -->
    <!-- <wd-dialouge> -->
      <!-- 这个是新写法，旧写法是slot='title' -->
      <!-- <template v-slot:title>
        <h2>我是提示</h2>
      </template>
    </wd-dialouge> -->

    <!-- <wd-button @click="visible = true">点我</wd-button>
    <wd-dialouge :visible.sync=visible>
      <template v-slot:title>
        标题
      </template>
      <p>我真帅</p>
      <template v-slot:footer>
        <wd-button type='primary' @click="visible = false">确定</wd-button>
        <wd-button @click="visible = false">取消</wd-button>
      </template>
    </wd-dialouge> -->

    <!-- <wd-input placeholder="请输入内容" disable></wd-input> -->
    <!-- <wd-input v-model="username" name='usename' clearable></wd-input>
    <wd-input type='password' v-model="username" name='usename' showpassword></wd-input>
    <wd-input placeholder="请输入内容" name='usename'></wd-input> -->
    <!-- <wd-switch v-model="issure" activecolor='red' inactivecolor='yellow' name='usename'></wd-switch>
    <wd-switch v-model="issure" name='usename'></wd-switch> -->
    <!-- <wd-radio label='1' v-model="gender">男</wd-radio>
    <wd-radio label='0' v-model="gender">女</wd-radio>

    <wd-radio label='1' v-model="gender"></wd-radio>
    <wd-radio label='0' v-model="gender"></wd-radio> -->

    <!-- <wd-radio-group v-model="gender">
      <wd-radio label='1'>男</wd-radio>
      <wd-radio label='0'>女</wd-radio>
    </wd-radio-group>

    <wd-radio label='1' v-model="gender">男</wd-radio>
    <wd-radio label='0' v-model="gender">女</wd-radio> -->

    <wd-checkbox label='吃饭' v-model= "active"></wd-checkbox>

    <wd-checkbox-group v-model="hobby">
      <wd-checkbox label='喝酒'></wd-checkbox>
      <wd-checkbox label='抽烟'></wd-checkbox>
      <wd-checkbox label='烫头'></wd-checkbox>
    </wd-checkbox-group>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      visible: false,
      username: 'zs',
      issure: false,
      gender: '1',
      active: false,
      hobby: ['喝酒', '抽烟', '烫头']
    }
  },
  methods: {
    fn () {
      window.alert('点我干啥')
    },
    a () {
      window.alert('我是圆形按钮')
    }
  }
}
</script>

<style lang="scss">
html, body {
  height: 100%;
  overflow: hidden;
}
#app {
  width: 100vw;
  height: 100vh;
  .wd-input {
  width: 200px;
  }
}

</style>
